<template>
  <!-- 遮罩层盒子 -->
  <div class="upMyInfo-box">
    <!--  内容盒子 -->
    <div class="info-box">
      <!--  头像 -->
      <div class="userLogo">
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img
            src="../../state/img/login01.jpg"
            class="avatar"
            style="width: 60px; height: 60px"
          />
          <span class="up-img">更改头像</span>
        </el-upload>
      </div>
      <!-- 信息 -->
      <div class="info-content">
        <el-form
          :label-position="labelPosition"
          label-width="90px"
          :model="formLabelAlign"
        >
          <el-form-item label="昵称：">
            <el-input v-model="formLabelAlign.name" v-if="upState"></el-input>
            <span v-else> 张三</span>
          </el-form-item>
          <el-form-item label="签名：">
            <el-input v-model="formLabelAlign.name" v-if="upState"></el-input>
            <span v-else> 张三</span>
          </el-form-item>
          <el-form-item label="账号：">
            <el-input v-model="formLabelAlign.name" v-if="upState"></el-input>
            <span v-else> 张三</span>
          </el-form-item>
          <el-form-item label="邮箱号：">
            <el-input v-model="formLabelAlign.name" v-if="upState"></el-input>
            <span v-else> 张三</span>
          </el-form-item>
          <el-form-item label="注册时间：">
            <el-input v-model="formLabelAlign.name" v-if="upState"></el-input>
            <span v-else> 张三</span>
          </el-form-item>
        </el-form>
      </div>
      <!-- 按钮 -->
      <div class="btns">
        <el-button type="success" round v-if="upState">保存</el-button>
        <el-button type="primary" round v-else style="background-color: salmon"
          >返回</el-button
        >
        <el-button type="info" round>修改</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'UpMyInfo',
    data() {
      return {
        imageUrl: '',
        labelPosition: 'left',
        formLabelAlign: {
          name: '',
          region: '',
          type: '',
        },
        upState: false,
      };
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
    },
  };
</script>

<style lang="less" scpoed>
  @import url('../../state/css/register/upMyInfo.less');
</style>
